<template>
  <div>
    <CarsBasicAttr @getAttrList="getAttrList"/>{{countKm}}
    <el-row :gutter="15">
      <el-col :span="4" v-for="item in attr_data" :key="item.key">
        <el-input v-model="attr_item[attr_basic_data.key][item.key]" :placeholder="item.value"></el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CarsBasicAttr from "./carsBasicAttr";

export default {
  components: {
    CarsBasicAttr
  },
  props: {
    initValue:{type:String,default:""},
    oil:{type:Number,default:0}
  },
  computed: {
    // 计算出公里数
    countKm() {
      if(!this.attr_item.basics || !this.attr_item.basics.true_oil || !this.attr_item.carsBody || !this.attr_item.carsBody.rongliang) {
        return 0;
      }
      const surplusOil = this.oil * this.attr_item.carsBody.rongliang / 100; // 剩余油量
      const km = surplusOil / this.attr_item.basics.true_oil * 100;
      this.$emit("update:countKm", km.toFixed(2));
    }
  },
  watch: {
    initValue: {
      handler(newValue) {
        newValue && (this.attr_item = JSON.parse(newValue));
        // console.log(newValue)
      },
      immediate: true
    }
  },
  data() {
    return {
      attr_data: [],
      attr_basic_data: {},
      attr_item: {}
    }
  },
  mounted() {
  },
  methods: {
    getAttrList(data) {
      this.attr_data = data.attr_data;
      this.attr_basic_data = data.attr_basic_data;
      this.attrFormat();
    },
    attrFormat() {
      if(this.attr_data.length == 0) { return false;}
      const attrBasicKey = this.attr_basic_data.key;
      if(this.attr_item[attrBasicKey]) { return false; }
      const attrJson = {};
      this.attr_data.forEach(item => {
        attrJson[item.key] = "";
      })
      this.$set(this.attr_item, attrBasicKey, attrJson);
    },
    callbackValue() {
      this.$emit("update:value", JSON.stringify(this.attr_item));
    }
  }
}
</script>

<style lang="less" scoped>

</style>